<template>
	<view class="issuing">
		<u-navbar
			title=" "
			:back-icon-size="28"
			back-icon-color="#ffffff"
			:border-bottom='false'
			:background="{ background: '#0287FA' }"
		></u-navbar>
		<view class="issuing_top"><u-image src="/static/image/issuing_bg.png" width="100%" :height="236"></u-image></view>
		<view class="issingbox">
			<view class="subsectbox">
				<u-subsection
					:list="typeList"
					active-color="#FFFFFF"
					inactive-color="#FFFFFF"
					:font-size="28"
					:height="40"
					:bold="true"
					bgColor="transparent "
					buttonColor="transparent"
					:animation="false"
					@change="actTypeChange"
				></u-subsection>
				<view
					class="active"
					:style="{
						top: '14rpx',
						left: actType == 1 ? '50rpx' : '190rpx'
					}"
				></view>
			</view>
			<view class="issinglist">
				<view class="order" v-for="(res, index) in goodsList" :key="res.id">
					<view class="item">
						<view class="left">
							<image :src="res.pictUrl" mode="aspectFill"></image>
							<image
								v-if="actType == 2 && index < 3"
								:src="index == 0 ? '/static/image/one_top.png' : index == 1 ? '/static/image/two_top.png' : '/static/image/three_top.png'"
								mode=""
								class="corner"
							></image>
							<view class="grayc" v-if="actType == 2 && index > 2">{{ index + 1 }}</view>
						</view>
						<view class="content">
							<view class="title u-line-1">{{ res.title }}</view>
							<view class="hotbox" v-if="actType == 2">
								<image src="/static/image/issuing_line.png" mode="" style="width:254rpx;height: 60rpx;" class="hot_bg"></image>
								<text class="hot_text">一共售出{{ res.order_count }}件</text>
							</view>
							<view class="type u-flex u-row-between">
								<text style="color: red;">￥{{ res.zkFinalPrice }}</text>
								<text class="u-line-1">
									{{ res.shopTitle }}
									<text v-if="actType == 1">{{ res.is_goodsId }}</text>
									<text v-else>{{ res.itemId }}</text>
								</text>
							</view>
							<view class="type u-flex u-row-between">
								<text>
									服务费
									<text class="numinfo">{{ res.serviceRate }}</text>
									%
								</text>
								<view class="price_right">
									<view class="cominfo">预估服务费 ￥{{ res.is_alipayFee == null ? 0 : parseFloat(res.is_alipayFee).toFixed(2) }}</view>
								</view>
							</view>
							<view class="price" v-if="actType == 1">
								<view class="price_left">下单数量 {{ res.is_goodsNum }}</view>
								<view class="price_right">{{ res.is_addTime }}</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :margin-top="40" :margin-bottom="0" bg-color="transparent" />
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop" :top="600"></u-back-top>
	</view>
</template>

<script>
export default {
	name: 'issuing',
	data() {
		return {
			page: 1,
			max_page: 1,
			scrollTop: 0,
			status: 'loadmore',
			mpbarheight: this.statusBarHeight,
			actType: 1,
			typeList: [
				{
					name: '实时出单'
				},
				{
					name: '出单排行'
				}
			],
			goodsList: []
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onLoad(option) {
		this.getissuelist(1);
		// this.getadoptgoods(1);
	},
	//挂载开始之前被调用
	beforeMount() {},
	//  onPullDownRefresh() {
	//  //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
	// console.log('refresh');
	// setTimeout(function() {
	// 	uni.stopPullDownRefresh(); //停止下拉刷新动画
	// }, 1000);
	//  },
	onReachBottom() {
		this.status = 'loading';
		this.page = ++this.page;
		if (this.max_page < this.page || this.max_page == this.page) {
			this.status = 'nomore';
			return false;
		}
		if (this.actType == 1) {
			this.getissuelist(parseInt(this.page));
		} else {
			this.getadoptgoods(parseInt(this.page));
		}
	},
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		getadoptgoods(page) {
			let daySart = new Date(new Date(new Date().toLocaleDateString()).getTime()).valueOf() / 1000;
			let dayEnd = parseInt(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1).valueOf() / 1000);
			let strat = this.$u.timeFormat(daySart, 'yyyy-mm-dd');
			let end = this.$u.timeFormat(dayEnd, 'yyyy-mm-dd');
			// console.log(strat);
			// console.log(end);
			this.$u.api
				.getadoptgoods({
					start_time: strat,
					end_time: end,
					page: page,
					pagesize: 10
				})
				.then(res => {
					console.log(res);
					this.max_page = res.data.data.max_page;
					this.goodsList.push(...res.data.data.data);
				})
				.catch(err => {
					console.log(err);
				});
		},
		getissuelist(page) {
			this.$u.api
				.getissuelist({
					page: page,
					pagesize: 10
				})
				.then(res => {
					// console.log(res);
					this.max_page = res.data.max_page;
					this.goodsList.push(...res.data.data);
				})
				.catch(err => {
					console.log(err);
				});
		},
		actTypeChange(i) {
			this.actType = 0 == i ? 1 : 2;
			this.goodsList = [];
			if (this.actType == 1) {
				this.getissuelist(1);
			} else {
				this.getadoptgoods(1);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.issuing {
	background-color: #f4f4f4;
	min-height: 100vh;
	.issingbox {
		.subsectbox {
			position: relative;
			width: 300rpx;
			margin-top: -60rpx;
			/* #ifdef APP-PLUS */
			margin-top: -58rpx;
			/* #endif */
			.active {
				position: absolute;
				width: 0;
				height: 0;
				border-top: 24rpx solid transparent;
				border-bottom: 22rpx solid #f4f4f4;
				border-left: 24rpx solid transparent;
				border-right: 24rpx solid transparent;
			}
		}
		.issinglist {
			margin-top: 40rpx;
			.order {
				width: 696rpx;
				background-color: #ffffff;
				margin: 24rpx auto;
				border-radius: 16rpx;
				box-sizing: border-box;
				padding: 20rpx;
				font-size: 28rpx;
				// padding-bottom: 80rpx;

				.top {
					display: flex;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;

						.store {
							margin: 0 10rpx;
							font-size: 28rpx;
							font-weight: bold;
						}
					}

					.right {
						color: $u-type-warning-dark;
					}
				}

				.item {
					display: flex;
					// margin: 18rpx 0 0;
					position: relative;
					.left {
						margin-right: 20rpx;
						height: 150rpx;

						image {
							width: 150rpx;
							height: 150rpx;
							border-radius: 12rpx;
						}
						.corner {
							position: absolute;
							top: -12rpx;
							left: -18rpx;
							width: 40rpx;
							height: 40rpx;
							text-align: center;
							display: flex;
							justify-content: center;
						}
						.grayc {
							position: absolute;
							top: -12rpx;
							left: -18rpx;
							width: 40rpx;
							height: 40rpx;
							text-align: center;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #96aecb;
							background-color: #e8e9ea;
							border-radius: 20rpx 16rpx 70rpx 16rpx;
						}
					}

					.content {
						.title {
							width: 478rpx;
							font-size: 28rpx;
							// line-height: 50rpx;
							color: #101010;
						}
						.hotbox {
							// width:254rpx;
							height: 60rpx;
							position: relative;
							.hot_bg {
								position: absolute;
								top: 4rpx;
								left: 0;
							}
							.hot_text {
								width: 254rpx;
								height: 50rpx;
								line-height: 50rpx;
								text-align: center;
								position: absolute;
								top: 18rpx;
								left: 0;
								color: white;
								font-size: 24rpx;
							}
						}
						.type {
							margin: 4rpx 0;
							font-size: 24rpx;
							color: $u-tips-color;

							.price_right {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;

								// width: 260rpx;
								.cominfo {
									color: rgba(153, 153, 153, 1);

									.numinfo {
										color: #333333;
									}
								}
							}
						}

						.price {
							font-size: 24rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.oldprice {
								text-decoration: line-through;
								color: rgba(153, 153, 153, 1);
							}

							.price_left {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								color: rgba(153, 153, 153, 1);
							}

							.price_right {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								color: rgba(153, 153, 153, 1);
								// width: 260rpx;
								.cominfo {
									color: rgba(153, 153, 153, 1);

									.numinfo {
										color: #333333;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
